<template>
  <div ref="container" class="comment-editor">
    <div class="input-wrapper" :class="{inline}">
      <el-input
        ref="inputBox"
        v-model="inputContent"
        type="textarea"
        maxlength="1000"
        show-word-limit
        class="input-box"
        style="height: 70px;"
        @focus="onInputFocus"
        @blur="onInputBlur"
        @keyup.enter.ctrl.exact.native="handlerSubmit"
      />
    </div>
    <div v-if="!inline" class="footer-action">
      <span style="flex: 1;">
        <template v-if="upload">
          <i class="el-icon-folder mr10 link-type font15" @click="uploadFile" />
          <input ref="fileInput" type="file" style="display:none;">
          <i class="el-icon-refresh link-type font15" @click="$emit('elIconRefresh', '')" />
        </template>
        <el-button v-else type="text" icon="el-icon-refresh" @click="$emit('elIconRefresh', '')">{{ $t('刷新评论') }}</el-button>
      </span>
      <div class="submit-button" style="align-self: auto;margin-left: 10px;" :disabled="!inputContent" @click="handlerSubmit">{{ $t('提交') }}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CommentEditor',
  props: {
    inline: {
      type: Boolean,
      default: false
    },
    upload: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      active: false,
      inputContent: '',
      inputBoxFocused: false,
      timeOutEvent: '',
      buttonText: this.$t('提交')
    }
  },
  computed: {
    showInlineButton() {
      return !!(this.inputBoxFocused || this.inputContent)
    }
  },
  destroyed() {
    document.removeEventListener('click', this.hideButton)
  },
  mounted() {
    document.addEventListener('click', this.hideButton)
  },
  methods: {
    uploadFile() {
      const inputElement = this.$refs.fileInput
      if (inputElement) {
        inputElement.click()
        inputElement.addEventListener('change', () => {
          const file = inputElement.files[0]
          const formData = new FormData()
          formData.append('file', file)
          console.log('inputElementinputElement', file, formData)
        })
      }
    },
    focus() {
      this.$refs.inputBox.focus()
    },
    hideButton(e) {
      if (this.$refs.container.contains(e.target)) {
        return
      }

      if (!this.$refs.container.contains(e.target)) {
        this.inputBoxFocused = false
      }
    },
    onInputFocus() {
      this.inputBoxFocused = true
    },
    onInputBlur(e) {
      if (this.$refs.container.contains(e.target)) {
        return
      }

      this.inputBoxFocused = false
    },
    handlerSubmit(e) {
      if (e.target.hasAttribute('disabled')) {
        return
      }
      if (this.inputContent !== '' && this.inputContent !== undefined && this.inputContent !== null) {
        this.$emit('submit', this.inputContent)
      }
    },
    emptyCommentContent() {
      this.inputContent = ''
    },
    handlerEmojiSelected(e) {
      this.$refs.inputBox.focus()
      const clonedNode = e.target.cloneNode(true)
      clonedNode.style.verticalAlign = 'text-top'
      document.execCommand('insertHTML', false, clonedNode.outerHTML)
    }
  }
}
</script>

<style scoped lang="scss">

.input-wrapper {
  &.inline {
    display: flex;
    .input-box {
      flex: 1;
      margin-right: 14px;
    }
  }
  .input-append {
    width: 30px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;

    &.hasbg {
      background: #eee;
    }
  }
}

.footer-action {
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.submit-tiptext {
  margin-left: auto;
  margin-right: 4px;
  font-size: 14px;
  color: #ccc;
}
.submit-button {
  transition:all 0.2s;
  background: #409eff;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
  padding: 6px 10px;
  color: white;
  user-select: none;
&.button-enter,&.button-leave-to{
  // zoom:0;
  margin-left:-40px;
  transform:scale(0,0)
}
  &[disabled] {
    cursor: not-allowed;
    background: #66b1ff;
  }
  &:hover {
    background: #66b1ff;
  }
  &:not([disabled]):active {
    background: #3a8ee6;
  }
}
.font15{
  font-size: 15px;
}
</style>
